<template>
	<!--重点企业画像功能-->
	<div style="padding-bottom:2vh">
		<div class="content-block">
			<div class="titleBox">
				<div class="titleLeft"></div>
				<div class="titleRight"></div>
				<!--<div class="titleCenter"><p>{{ defaultInfo.project_name }}</p></div>-->
				<div class="titleCenter">项目详情</div>
			</div>
			<div class="template-box">
				<div class="corporate-portrait">
					<div class="topBox">
						<div class="tabList">
							<ul>
								<li>
									<div style="width:10%" class="titles top-border">项目标题：</div>
									<div style="width:90%" class="top-border rightBorder">
										{{ defaultInfo.project_name }}
										<!-- <span v-for="(item,index) in defaultInfo.project_name" :style="{background:'rgba('+ldColor[index]+',.4'+')',color:'rgba('+ldColor[index]+',1'+')','border-color':'rgba('+ldColor[index]+',.7'+')'}">{{item}}</span> -->
									</div>
								</li>
								<li>
									<div style="width:10%" class="titles top-border">产业类型：</div>
									<div style="width:23.333%">{{ defaultInfo.cylx }}</div>
									<div style="width:10%" class="titles">行业类别：</div>
									<div style="width:23.333%" class="rightBorder">{{ defaultInfo.hylb }}</div>
									<div style="width:10%" class="titles">建设类型：</div>
									<div style="width:23.333%">{{ defaultInfo.jslx }}</div>
								</li>
								<li>

									<div style="width:10%" class="titles">实际地址：</div>
									<div style="width:23.333%">
										<smart-tooltip rows="1" :value="defaultInfo.sjdz" :cursor="false">
											{{ defaultInfo.sjdz }}
										</smart-tooltip>
									</div>
									<div style="width:10%" class="titles">负责人：</div>
									<div style="width:23.333%" class="rightBorder">{{ defaultInfo.fzr }}</div>
									<div style="width:10%" class="titles">负责人联系电话：</div>
									<div style="width:23.333%;" class="rightBorder manyText">{{ defaultInfo.fzrlxdh }}</div>
								</li>
								<li>
									<div style="width:10%" class="titles">计划总投资：</div>
									<div style="width:23.333%">{{ defaultInfo.ztz }}</div>
									<div style="width:10%" class="titles">开始建设时间：</div>
									<div style="width:23.333%">{{ defaultInfo.kssj }}</div>
									<div style="width:10%" class="titles">结束建设时间：</div>
									<div style="width:23.333%" class="rightBorder">{{ defaultInfo.jssj }}</div>
								</li>
								<li style="height:15vh">
									<div style="width:10%" class="titles">建设目标：</div>
									<div style="width:90%;;overflow-y: auto;line-height: 3vh;padding:1vh 1vw;box-sizing: border-box;" class="rightBorder manyText">
										{{ defaultInfo.jsmb }}
									</div>
								</li>
								<li style="height:11vh">
									<div style="width:10%" class="titles">项目建设内容：</div>
									<div style="width:90%;;overflow-y: auto;;line-height: 3vh;padding:1vh 1vw;box-sizing: border-box;" class="rightBorder manyText">
										{{ defaultInfo.jsnr }}
									</div>
								</li>
							</ul>
						</div>
					</div>
					<ul class="tab-switch-box">
						<li v-for="(item,index) in tabListText" :key="index" :class="{active:tabListIndex===index}" @click="tabClick(item,index)"><span>{{ item.name }}</span></li>
					</ul>
					<div class="bottomBox">
						<table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currentPage"></table-block>
					</div>
				</div>
			</div>
			<el-button class="backBtn" type="primary" size="small" @click="backClick">返回</el-button>
		</div>
	</div>
</template>

<script>
import {getCommonDataDetail, getProjectData} from '@/api/pages.js'

export default {
	name: "corporate-portrait",
	components: {
		TableBlock: () => import('@/components/table-block'),
		SmartTooltip: () => import('@/components/smart-tooltip')
	},
	props: {},
	data() {
		return {
			tabListText: [
				{name: '项目手续', id: 'P027'},
				{name: '项目投资', id: 'P028'},
				// {name: '招标采购', id: 'P029'},
				// {name: '合同备案', id: 'P030'},
				{name: '项目进度', id: 'P031'},
				// {name: '竣工验收', id: 'P032'},
				// {name: '绩效评价', id: 'P033'},
			],
			ldColor: ['222,62,62', '10,188,243', '248,219,23', '0,255,0'],//取rgb的前三位R,G,B值,A值动态配置
			projectId: this.$route.query.projectId || 512,
			defaultInfo: {},
			tabListIndex: 0,
			pageSize: 8,
			total: 0,
			oprData: {},
			currentPage: 1,
			projectType: 'P027',
			title: "",
			height: "3vh",
		}
	},
	computed: {},
	created() {
	},
	mounted() {
		this.getProjectData(this.projectType, this.projectId, 1, this.pageSize)
		this.getCommonDataDetail('C072', this.projectId) // 512测试id
	},
	methods: {
		tabClick(item, index) {
			this.tabListIndex = index
			this.projectType = item.id
			this.currentPage = 1
			this.getProjectData(this.projectType, this.projectId, 1, this.pageSize)
		},
		// 分页
		currentChange(e) {
			this.currentPage = e
			this.getProjectData(this.projectType, this.projectId, e, this.pageSize)
		},

		// 列表信息
		getProjectData(busiCode, projectId, current, size) {
			getProjectData(busiCode, projectId, current, size).then(res => {
				if (res.data.code === 200) {
					this.oprData = {}
					this.oprData.tableData = res.data.data.tableData
					this.oprData.list = res.data.data.list.records
					this.total = res.data.data.list.total
				}
			}).catch(err => {

			})
		},

		//详情页面
		getCommonDataDetail(busiCode, projectId) {
			getCommonDataDetail(busiCode, projectId).then(res => {
				// console.log(res,'详情')
				if (res.data.code === 200) {
					this.defaultInfo = res.data.data.list[0]
					//   console.log(this.defaultInfo)
				}
			}).catch(err => {

			})
		},
		backClick() {
			this.$router.go(-1)
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.content-block {
	margin: 3% 2%;
	width: 96%;
	padding: 0 2vw;
	box-sizing: border-box;
	background: url('../../assets/images/centerqybg.png');
	background-size: 100% 100%;

	position: relative;

	.titleBox {
		width: 100%;
		height: 10.5vh;
		position: relative;

		.titleLeft {
			width: 35%;
			height: 100%;
			float: left;
			background: url('../../assets/images/left-1.png')  repeat-x 0 7vh;
			background-size: 100%;
		}

		.titleRight {
			width: 35%;
			height: 100%;
			float: right;
			background: url('../../assets/images/right-1.png')  repeat-x 0 7vh;
			background-size: 100%;
		}

		.titleCenter {
			width: 30%;
			height: 100%;
			margin: 0 auto;
			background: url('../../assets/images/titlebg.png');
			background-size: 100% 100%;
			text-align: center;
			line-height: 13vh;
			font-size: 1.35vw;
			letter-spacing: 2px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #DAF1FF;
		}
	}

	.template-box {
		width: 100%;
		margin-top: 1.5vh;
		height: auto;
		overflow: hidden;
	}

	.backBtn {
		width: 4vw;
		height: 3.5vh;
		position: absolute;
		top: 2vh;
		right: 2vw;
		background-image: url(../../assets/images/back.png);
		background-size: 100% 100%;
		padding: 0;
		outline: none;
		border-color: rgba(0, 0, 0, 0);
		color: #03D3FF;
		border-radius: 9px;
		font-size: 12px;
		box-sizing: border-box;
		text-indent: 16px
	}
}

.corporate-portrait {
	width: 100%;
	height: auto;
	overflow: hidden;

	.topBox {
		width: 100%;
		height: 42vh;

		.tabList {
			width: 100%;
			height: 100%;
			background: rgba(12, 51, 127, 0.4);

			li {
				list-style: none;
				height: 4vh;

				> div {
					width: 50%;
					height: 100%;
					color: #fff;
					float: left;
					border: 1px solid #0e5e8d;
					padding: 0 1vw;
					// font-family: Microsoft YaHei;
					font-weight: bold;
					font-size: 0.88vw;
					border-top: none;
					border-right: none;
					line-height: 3.9vh;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					span {
						padding: 0.05vh 0.4vw;
						font-size: 0.78vw;
						border-radius: 4px;
						border: 0.05vw solid;
						margin-right: 1vw;
					}

					a {
						color: #0274ff;
					}
				}

				div.top-border {
					border-top: 1px solid #0e5e8d;
				}

				div.rightBorder {
					border-right: 1px solid #0e5e8d;
				}

				div.manyText {
					line-height: 20px;
				}

				div.titles {
					color: #0ac7fe;
				}
			}
		}
	}

	.tab-switch-box {
		width: 100%;
		height: 4.5vh;
		margin-bottom: 1vh;
		background-image: linear-gradient(
				to right,
				rgba(3, 66, 123, 0.2),
				rgba(3, 66, 123, 0.1),
				rgba(3, 66, 123, 0)
		);
		padding: 0 2vh;
		display: flex;
		margin-top: 2vh;

		li {
			flex: 1;
			height: 100%;
			list-style: none;
			transform: skew(-45deg);
			background-color: #03427b;
			float: left;
			margin-right: 0.2vw;
			border: 0.5px solid #0a9dc2;

			span {
				display: block;
				line-height: 4.2vh;
				color: #05b4fa;
				text-align: center;
				transform: skew(45deg);
				font-size: 0.95vw;
				font-weight: bold;
				cursor: pointer;
			}
		}

		li.active {
			background-color: #0cacd8;

			span {
				color: #fff;
			}
		}
	}

	.bottomBox {
		width: 100%;
		height: 45vh;
		// margin-top:4vh;
		overflow-y: auto;
		// padding-bottom:6vh;
	}
}
</style>
